<template>
  <div>
    <h3>从vuex中读取数据 -- {{ num }}</h3>
    <hr />
    <button @click="clickNum">同步操作num数据</button>
    <hr />
    <router-link to="/news">新闻页</router-link>
  </div>
</template>

<script>
export default {
  // 可以利用计算属性来完成对于在vuex中获取state数据的简写
  computed: {
    num() {
      // return this.$store.state.count.num
      // 开启了强制的命名空间
      return this.$store.getters['count/num']
    }
  },
  methods: {
    clickNum() {
      // 在组件中让vuex中的mutations方法来操作 通知它  同步
      // 参数1：mutations中的定义的方法名
      // 参数2：payload数据  可选
      this.$store.commit('count/addNum', 10)
    }
  }
}
</script>

<style lang="scss" scoped></style>
